<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        // 1.数组塌陷问题
        // var arr = [1,2,3,4];

        // for(var i=0;i<arr.length;i++){
        //     console.log("执行了");
        //     arr.splice(i,1);  // splice 会改变原本的数组
        // }
        // console.log(arr);


        /* 
        第一次 ： i = 0   arr = [1,2,3,4]  arr.length = 4;
                arr.splice(0,1) -----> arr = [2,3,4];
        第二次 ： i=1  arr = [2,3,4]  arr.length = 3;
                arr.splice(1,1)  ----->  arr = [2,4];
        第三次 ： i = 2 arr = [2,4]  arr.length = 2; 不执行了

        console.log(arr); ----> [2,4];
        
        
        */

// 2.解决数组塌陷 
// var arr = [1,2,3,4];

//         for(var i=0;i<arr.length;i++){
//             console.log("执行了");
//             arr.splice(i,1);  // splice 会改变原本的数组
//             i--;
//         }
//         console.log(arr);

        /* 
        第一次 ： i =0   arr = [1,2,3,4]  arr.length = 4;
                arr.splice(0,1) -----> arr = [2,3,4]; i--   i= -1
        第二次 ： i=0  arr = [2,3,4]  arr.length = 3;
                arr.splice(0,1)  ----->  arr = [3,4]; i-- i= -1；
        第三次 ： i = 0 arr = [3,4]  arr.length = 2;  
                    arr.splice(0,1) --- >arr = [4]  i-- i =-1;
        第四次 ： i=0  arr = [4]   arr.lenght = 1  
                    arr.splice(0,1)   ---->arr= []; 
        第五次  : i = 0 arr.length = 0;
 
        console.log(arr); ----> [];
        
        
        */

var arr = [1,2,3,4];
for(var i=0;i<arr.length;i++){
    // arr.push("5");
    // i++;
}

    </script>
</body>
</html>